// import path from "path";
// import fs from "fs";
// import { dirname } from "node:path";
// import { fileURLToPath } from "node:url";

// const __filename = fileURLToPath(import.meta.url);
// const __dirname = dirname(__filename);

// const psd = await PSD.open(path.resolve(__dirname, "../public/test.psd"));

// const root = psd.tree().root();

// console.log(root, 'root');
// const traverseLayers = (layer) => {
//   if (layer.isGroup()) {
//     // 处理组图层
//     console.log("Group layer:", layer.name());
//     layer.children().forEach(child => traverseLayers(child));
//   } else if (layer.isLayer()) {
//     // 处理普通图层
//     console.log('Layer:', layer.name(), 'with bounds:', layer.bounds());
//   }
// };

// traverseLayers(root);
// import css from "tree-to-code/lib/css.js";
// const css = require('tree-to-code/lib/css').default;
// const html = require('tree-to-code/lib/html').default;
// const jsx = require('tree-to-code/lib/jsx').default;
// const scss = require('tree-to-code/lib/scss').default;
// const styled = require('tree-to-code/lib/styled').default;
// const wxml = require('tree-to-code/lib/wxml').default;
// const wxss = require('tree-to-code/lib/wxss').default;
// console.log(css, 'treeNode')
// const treeExp = PSD.fromFile('./path/to/file.psd').parse().tree().export();

// const options = {
//   imgPathPrefix: 'assets/',
//   usePostcssAutoBg: true,
//   useAutoBgMacro: true,
//   prependVwFn: false,
//   reactType: 'styled',
//   vwBase: doc.width,
//   doc: {
//     width: doc.width,
//     height: doc.height
//   }
// };

// const cssCode = css(treeExp, options);
// const htmlCode = html(treeExp, options);
// console.log(cssCode, htmlCode);
const path = require("path");
const inputDir = path.resolve(__dirname, "../public/10.psd");
const outDir = path.resolve(__dirname, "../src/assets/psd");
const shortid = require('shortid');  

let css = "";
let html = "";

const OCss = (key, layer) => {
  css += `.${key} {
    transform: translate(${layer.left}px, ${layer.top}px);
    width: ${layer.width}px;
    height: ${layer.height}px;
    opacity: ${layer.opacity / 100};
  }; `;
};

const OHtml = (key, layer) => {
  html += `<div class="${key}">${layer.name || ''}</div>`;
};

// 引入 PSD.js
const PSD = require("psd");
async function parsePSDLayers(psdFilePath) {
  try {
    // 加载 PSD 文件
    const psd = await PSD.open(psdFilePath);

    // 获取根图层（或图层组）
    const root = psd.tree().root();
    console.log(root, "-----");
    // 遍历图层树
    function traverseLayers(layer) {
      // 输出当前图层的名称
      console.log("Layer Name:", layer.name);

      // 检查图层是否有更多属性，并相应地输出它们
      // 注意：以下属性名可能需要根据 psd.js 的实际实现进行调整
      const key = shortid.generate();
      if (layer.visible) {
        console.log(layer, 'layer')
        OCss(key, layer);
      }
      // ... 其他你感兴趣的属性

      // 如果图层是图层组，则遍历其子图层
      const children = layer.children();
      if (children) {
        children.forEach((child) => {
          traverseLayers(child);
        });
      }
    }

    // 从根图层开始遍历
    traverseLayers(root);
  } catch (err) {
    console.error("Error parsing PSD file:", err);
  }
}

parsePSDLayers(inputDir);
